<template>
  <view class="cart-pop" :style="showTabHeight ? 'padding-bottom: 100rpx' : ''">
    <u-popup :show="show" :round="20" mode="bottom" @touchmove.stop.prevent="movehandle" @close="$emit('update:showFlag', false)">
      <view class="box">
        <view class="header">
          <view class="left">
            <u-checkbox-group v-model="selectAllBox" @change="handleRadioAll">
              <view class="flex-row items-center">
                <u-checkbox activeColor="#0000A6" name="all" shape="circle"></u-checkbox>
                <view class="slabel">{{ selectLabel }}</view>
              </view>
            </u-checkbox-group>
          </view>
          <view class="right flex-row items-center" @click="handleClear">
            <up-image src="https://zxtest001.oss-cn-beijing.aliyuncs.com/l-owner-uni3/icon_qingkong.png" width="26rpx" height="26rpx"></up-image>
            <view class="clear">清空</view>
          </view>
        </view>
        <scroll-view class="contentview" scroll-y>
          <u-checkbox-group v-model="productStore.selectBox" @change="handleSelect">
            <view v-for="item in productStore.getCartProds" :key="item.id" class="flex-row items-center justify-between flex-cell">
              <u-checkbox activeColor="#0000A6" :name="item.id || item.product_unit_id" shape="circle"></u-checkbox>
              <view style="flex: 1; padding-right: 24rpx; padding-top: 24rpx">
                <!-- OMS下单页面 -->
                <OrderProductCell v-if="pageType == 'order'" :item="item" @change="(val) => handleCount(val, item)" @on-price="handleEditPrice(item, index)"></OrderProductCell>
                <view v-else>
                  <!-- OMS新增采购 -->
                  <PurchaseCell v-if="productStore.orderClassify == 'purchase'" :item="item" @change="(val) => handleCount(val, item)" @on-price="handleEditPrice(item, index)"></PurchaseCell>

                  <!-- 货主xx单选品 -->
                  <OrderOptCell v-else :item="item" @change="(val) => handleCount(val, item)"></OrderOptCell>
                </view>
              </view>
            </view>
          </u-checkbox-group>
          <view v-if="!productStore.getCartProds.length" class="flex-row justify-center items-center">
            <u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png"> </u-empty>
          </view>
        </scroll-view>
      </view>
    </u-popup>
    <Modal v-model:showFlag="modalValue.price" showCancelButton title="修改销售价格" @confirm="handleConfirmPrice">
      <view class="inputmodal" style="width: 100%">
        <u-input v-model="inputPrice" placeholder="销售价格" clearable type="digit">
          <template #suffix>
            <view>元</view>
          </template>
        </u-input>
      </view>
    </Modal>
  </view>
</template>

<script setup lang="ts">
import { watch, ref, reactive, computed, toRaw } from 'vue';
import OrderOptCell from '@/component/home/order-cell/optcell.vue';
import PurchaseCell from '@/component/purchase/optcell/index.vue';
import OrderProductCell from '@/component/home/order-cell/product-cell.vue';
import Modal from '@/component/common/confirm-modal/modal.vue';

import useProducts from '@/lib/store/product';
const productStore = useProducts();
import { storeToRefs } from 'pinia';
let { getCartProds, selectBox }: any = storeToRefs(productStore);

const props = defineProps({
  showFlag: { type: Boolean, default: false }, // 双向绑定的数据,控制弹窗打开关闭
  title: { type: String, default: '' }, // 标题
  pageType: { type: String, default: '' }, // 哪个页面调用
  showTabHeight: { type: Boolean, default: false },
});
const show = ref<boolean>(false);
const selectAllBox: any = ref([]);
const modalValue: any = reactive({
  price: false,
});
const inputPrice: any = ref('');
const modalItem: any = ref();
const modalIndex: any = ref();
watch(
  () => getCartProds.value.length,
  (val) => {
    if (val && val == selectBox.value.length) {
      selectAllBox.value = ['all'];
    } else {
      selectAllBox.value = [];
    }
  },
  { immediate: true }
);
watch(
  () => selectBox.value.length,
  (val) => {
    if (val && val == getCartProds.value.length) {
      selectAllBox.value = ['all'];
    } else {
      selectAllBox.value = [];
    }
  }
);

const selectLabel = computed(() => {
  return `已选产品${productStore.selectBox.length ? '（' + productStore.selectBox.length + '件）' : ''}`;
});

const emit = defineEmits(['update:showFlag', 'on-confirm', 'clear']);
watch(
  () => props.showFlag,
  async (newVal, oldVal) => {
    show.value = newVal;
    if (selectBox.value.length && selectBox.value.length == getCartProds.value.length) {
      selectAllBox.value = ['all'];
    } else {
      selectAllBox.value = [];
    }
  },
  { immediate: true }
);
function movehandle() {}
function handleCount(val: any, item: any) {
  item.count = val.value;
  productStore.debounceUpdateCountCb(val.name, item);
}

function handleClear() {
  uni.showModal({
    title: '提示',
    content: '确认清空货品？',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定');
        productStore.clearSelected();
        selectAllBox.value = '';
        emit('clear');
        emit('update:showFlag', false);
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    },
  });
}
function handleRadioAll(val: any) {
  console.log('radioall======', val);
  if (val.includes('all')) {
    selectAllBox.value = val;
    productStore.cartSelectAll();
  } else {
    selectAllBox.value = '';
    productStore.selectBox = [];
  }
}
function handleSelect(val: any) {
  console.log('handleSelect', val);
  productStore.selectBox = val;
}

function handleEditPrice(item: any, index: number) {
  console.log('handleEditPrice', item, index);
  modalValue.price = true;
  modalItem.value = item;
  modalIndex.value = index;
  inputPrice.value = item.price;
}

function handleConfirmPrice() {
  productStore.changedProds[modalItem.value.product_unit_id].price = inputPrice.value * 1;
  modalValue.price = false;
}
</script>

<style lang="scss" scoped>
  ::v-deep.u-border{
    border-width: 2rpx !important;
    border-color: rgba(0,0,0,0.1) !important;
    border-style: solid;
  }
.cart-pop {
  .noradio {
    ::v-deep .u-radio__icon-wrap--circle {
      background-color: #fff !important;
      border-color: #c8c9cc !important;
    }
  }
  .box {
    width: 100%;
    font-size: $uni-font-size-lg;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    overflow: hidden;
    .flex-cell {
      flex: 1;
      padding-left: 24rpx;
    }
    .header {
      padding: 24rpx 30rpx 24rpx;
      border-bottom: 2rpx solid #f4f5f8;
      height: 52rpx;
      .left {
        float: left;
        height: 52rpx;
        line-height: 38rpx;
        font-weight: 500;
        color: #1b1a1d;
        font-size: 28rpx;
      }
      .right {
        float: right;
        height: 52rpx;
      }
    }
    .clear {
      font-weight: 400;
      color: #7f7f7f;
      line-height: 36rpx;
      font-size: 26rpx;
      padding-left: 10rpx;
    }

    .footer {
    }
    .slabel {
      font-weight: 400;
      color: #1b1a1d;
      font-size: 28rpx;

      line-height: 36rpx;
    }
  }
  .contentview {
    max-height: calc(70vh - 100rpx);
    display: flex;
    flex-grow: 1;
  }
  .inputmodal {
    width: 100%;
    margin-top: 24rpx;
    margin-bottom: 24rpx;
  }
}
</style>
